<template>
  <div>
    <div>
      <div v-for="(item , index) in videoList" :key="index" class="videoList" :class="markTitleVBool?'':'videoLists'">
        <div slot="file" class="videoListItem">
          <video v-if="item.downAnnexType=='video/mp4'" ref="videoId" :src="item.annexPath"
                 style="width: 100%; height: 100%; object-fit: fill" :autoplay="false" controls muted
          ></video>
          <!-- <el-image
            style="width: 100px; height: 100px"
            :src="item.newAnnexPath"
          ></el-image> -->
          <img v-else :src="item.annexPath" style="width:100%;height:100%" alt="">
          <!-- <img v-else :src="annexPath(item.annexPath)" style="width:100%;height:100%" alt=""> -->

          <div class="bao_vedioBox">
            <span @click="pictureCardPreview(item)">
              <i class="el-icon-zoom-in cursor-pointer"></i>
            </span>
            <span @click="downLoadFileFun(item)">
              <i class="el-icon-download cursor-pointer"></i>
            </span>
            <span v-if="deleteBool" @click="closeFilesFun(item)">
              <i class="el-icon-delete cursor-pointer"></i>
            </span>
          </div>
        </div>
        <div class="m-rem-b-10" style="height: 35px;">
          <el-input v-show="markTitleVBool&&deleteBool" v-model.trim="item.logoName" placeholder="请输入" maxlength="20" @blur="markTitleInput(item)"></el-input>
          <span v-show="markTitleVBool&&!deleteBool" style="display: inline-block;text-align: center;width:100% ;overflow: hidden;
                white-space:nowrap;
                text-overflow:ellipsis;" :title="item.logoName"
          >{{ item.logoName }}</span>
        </div>

      </div>
      <!-- <el-upload v-if="videoList.length < limit&&deleteBool" ref="upload" class="upload-demo" :limit="limit" action="#" :file-list="videoList" -->

      <el-upload v-if="deleteBool&&((limit&&videoList!=[]&&videoList.length < limit)||!limit)||deleteBool" ref="upload" class="upload-demo" :limit="limit" action="#" :file-list="videoList"

                 :accept="accept" :multiple="multiple" :show-file-list="false" :http-request="file=>requestFileFun(file)"
                 :on-change="changeFile"
                 :on-exceed="exceedFun"
      >
        <div class="videoBodx">
          {{ deleteBool }}
          <!-- <i class="el-icon-plus"></i>
          <p>上传{{ title }}</p> -->
        </div>
      </el-upload>
    </div>

    <!-- 新增对话框 -->
    <el-dialog title="附件进度" :visible.sync="filesProcessDialog" class="filesProcessDialog" :close-on-click-modal="false"
               :close-on-press-escape="false" :show-close="false" width="500px" :modal="false"
    >
      <div v-for="(item,keyIndex) in filesProcessList" :key="keyIndex" class="progressItem">
        <p class="progressItemTet">
          <i class="el-icon-paperclip" style="margin-right:8px"></i>
          <span class="bao_filesNamepl" :title="decodeURI(item.annexName)">{{ decodeURI(item.annexName) }}</span>
        </p>
        <el-progress :stroke-width="20" :status="item.statusFiles" :percentage="item.percentageFiles"></el-progress>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="resetProcessFun">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 放大视频 -->
    <el-dialog :visible.sync="dialogVisible" class="filedialogImage" append-to-body :close-on-click-modal="false"
               :close-on-press-escape="false" @close="dialogVisible=false"
    >
      <video v-if="dialogImageType=='video/mp4'" ref="videoId" :src="dialogImageUrl"
             style="width: 100%; height: 100%; object-fit: fill" :autoplay="false" controls muted
      ></video>
      <!-- <img v-else  :src="item.annexPath" style="width:100%;height:100%" alt=""> -->
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import { uploadMixins } from '@/mixins/publicMixins/uploadMixins'
import { toChinesNum } from '@/utils/commonUtils/HLUtils.js' // 数字转文字

export default {
  mixins: [uploadMixins],
  props: {
    // 按钮title
    title: {
      type: String,
      default: ''
    },
    // 按钮格式
    type: {
      type: String,
      default: 'text'
    },
    // 文件格式
    accept: {
      type: String,
      default: 'text'
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: true
    },
    // 能否删除
    deleteBool: {
      type: Boolean,
      default: true
    },
    // 可上传的数量
    limit: {
      type: Number
    },
    videoList: {
      type: Array,
      default: () => []
    },
    // 是否可以标注图片
    markTitleVBool: {
      type: Boolean,
      default: false
    },
    dateTiem: {
      type: String
    }, // 有效期
    dateTiemName: {
      type: String
    } // 有效期文件名称

  },
  data() {
    return {
      annexPathName: null,
      videoFiles: true,
      fileList: [], // 图片展示的数据
      filesProcessDialog: false, // 进度条弹框
      filesProcessList: [], // 进度条数据
      filesNum: 0, // 上传的数量
      successData: [], // 上传成功的附件
      // videoList: [],
      dialogVisible: false, // 图片放大时的弹框
      dialogImageUrl: null, // 图片放大
      dialogImageType: null// 放大的格式判断
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    }
  },
  created() {
  },
  methods: {

    annexPath(path) {

      // return
    },
    // 附件校验

    // 删除文件
    closeFilesFun(row) {
      console.log(row)
      if (row.editBool === true) {
        this.videoList.forEach((element, index) => {
          if (element.downAnnexName === row.downAnnexName) {
            // this.deleteData.push(element)
            this.videoList.splice(index, 1)
            this.msgAlt('删除成功', 'success')
            this.$emit('deleteFileList', element, 'deleteAnnexIds')
          }
        })
      } else {
        this.deleteFileFun(row, this.videoList)
      }
    },
    // 放大图片
    pictureCardPreview(row) {
      this.dialogImageUrl = row.annexPath
      this.dialogImageType = row.downAnnexType
      this.dialogVisible = true
    },

    exceedFun(files, fileList) {
      if (files.length > this.limit) {
        this.msgAlt('最多可上传' + toChinesNum(this.limit) + '张图片', 'error')
        return
      }
      if (Number(this.videoList.length) + Number(files.length) > this.limit) {
        this.msgAlt('最多可上传' + toChinesNum(this.limit) + '张图片', 'error')
        return
      }
    }

  }
}
</script>
